<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XXX平台</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
    <header>
        <div class="c900 flex">
            <a href="./"><h1 style="color: #fdfdfd">XXX平台</h1></a>
            <span class="flex">
                <a><el-avatar src="https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar></a>
                <a href="register.html">注册</a>
                <a href="login.html">登录</a>
            </span>
        </div>
    </header>
    <main class="c900">
        <fieldset>
            <legend>登录</legend>
            <form action="login" class="grid2" style="width: 300px; margin: auto"
                  action="" method="post" enctype="application/x-www-form-urlencoded">
                <label for="">账号:</label><input type="text" name="name">
                <label for="">密码:</label><input type="password" name="pwd">
                <label for=""></label>
                <div style="text-align: right"><a href="">注册</a>
                    <button>登录</button></div>
            </form>
        </fieldset>
        <fieldset>
            <legend>注册</legend>
            <form class="grid4" style="width: 900px; margin: auto"
                  action="reg1" method="post" enctype="application/x-www-form-urlencoded">
                <img :src="src"
                     style="grid-area: 1/1/10/1; width: 200px;cursor: pointer"
                     @click="$refs.fileinput.click()"
                ></img>
                <label for="">账号:</label><input type="text" v-model="person.name">
                <small>{{errors.name}}</small>

                <label for="">密码:</label><input type="password" v-model="person.pwd">
                <small>{{errors.pwd}}</small>

                <label for="">学生:</label><input type="checkbox" v-model="person.student" value="true">
                <small>{{errors.student}}</small>

                <label for="">邮箱:</label><input type="email" v-model="person.email">
                <small>{{errors.email}}</small>

                <label for="">电话:</label><input type="number" v-model="person.phone">
                <small>{{errors.phone}}</small>

                <label for="">年龄:</label><input type="number" v-model="person.age">
                <small>{{errors.age}}</small>

                <label for="">生日:</label><input type="text" v-model="person.birthday"
                                                name="birthday">
                <small>{{errors.birthday}}</small>

                <label for=""></label>
                <div style="text-align: right">
                    <button>表单注册</button></div>
                    <button @click.prevent="reg">AJAX注册</button>
            </form>
        </fieldset>
        <fieldset>
            <legend>文件上传</legend>
            <form class="grid2" style="width: 300px; margin: auto"
                  action="uploadfile" method="post" enctype="multipart/form-data">
                <label for="">类型:</label>
                <select name="type">
                    <option value="image">图片</option>
                    <option value="audio">音频</option>
                    <option value="video">视频</option>
                    <option value="all">不限</option>
                </select>
                <label for="">文件:</label>
                <input ref="fileinput" @change="upload" type="file" name="file">
                <label for="">图片:</label><img :src="src" width="200px">
                <label for=""></label>
                <div style="text-align: right">
                    <button>表单上传</button>
                    <button @click.prevent="upload">AJAX上传</button>
                </div>
            </form>
        </fieldset>
    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            person:{
                name:"",
                pwd:"",
                age:0,
                student:false,
                email:"",
                phone:"",
                birthday: new Date()
            },
            errors:{
                name:"",
                pwd:"",
                age:"",
                student:"",
                email:"",
                phone:"",
                birthday: ""
            },
            src:"https://img1.baidu.com/it/u=445400343,2429165517&fm=253&fmt=auto&app=138&f=JPEG?w=236&h=236"
        },
        created() {},
        methods : {
            reg(){
                axios.post("reg",this.person).then(res=>{
                    this.errors = {
                        name:"",
                        pwd:"",
                        age:"",
                        student:"",
                        email:"",
                        phone:"",
                        birthday: ""
                    };
                    if(res.data.code == 1){
                        this.$alert("注册成功!");
                    } else {
                        res.data.data.forEach(e=>{
                            this.errors[e.field] = e.defaultMessage;
                        });
                    }

                });
            },
            upload(){
                var fd = new FormData();
                var fl = document.querySelector("form input[type='file']");
                fd.append("file", fl.files[0]);

                axios.post("uploadfile",fd).then(res=>{
                    if(res.data.code==1){
                        this.src = res.data.data;
                    } else if(res.data.msg){
                        this.$alert(res.data.msg);
                    } else {
                        this.$alert("文件上传失败");
                    }
                })
            }
        }
    })
</script>
</body>
</html>

<style>
    form small{
        color: red;
        min-width: 200px;
    }

    html,body,#app{
        height: 100%;
    }
    body{
        margin: 0px;
        padding: 0px;
        background-size: cover;
    }
    a{
        text-decoration: none;
        color: #666
    }
    img{
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
    .c900{
        width: 900px;
        margin-inline: auto;
    }
    .flex{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .grid2{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto auto auto auto;
    }
    header{
        background-color: #0f9ae0;
        background-size: cover;
        position: sticky;
        top: 0px;
        z-index: 1;
        height: 60px;
    }
    header h1{
        margin: 10px;
    }
    header span>a{
        margin-left: 20px;
        color: #fff;
    }
    main{
        background-color: #eee;
        min-height: calc(100% - 100px);
        padding: 20px;
    }
</style>